@import "@/styles/__index.less";

.progress-bar {
  height: 100%;
  display: flex;
  flex-direction: column;

  .progress-bar-item {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    //&:nth-child(3n + 1) .bar .bar-highlight {
    //  background: linear-gradient(to right, #202f4b, #4e8ff2);
    //}
    //
    //&:nth-child(3n + 2) .bar .bar-highlight {
    //  background: linear-gradient(to right, #202f4b, #5973f7);
    //}

    .bar .bar-highlight {
      background: linear-gradient(to right, #052a30, #B6EFED);
    }

    .infos {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .number {
        .pmzd-blue;
        font-size: 16px;
      }
    }

    .bar {
      height: 4px;
      background-color: #265150;
      position: relative;

      .bar-highlight {
        height: 4px;
        position: absolute;
        top: 0px;
        left: 0px;

        .point {
          position: absolute;
          bottom: -6px;
          right: -6px;
          width: 16px;
          height: 16px;
          background-image: url("@/assets/progress-bar-point.png");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
